		<h1>Administration des clients</h1><br/>
		<div id="users_list">
			<table id="users_list_tbl"></table><br/>
			<p class="center"><button id="new_client">Ajouter un client</button></p>
		</div>
		<div id="client_form" title="Ajouter un client">
			<form>
				<fieldset>
					<label for="Lastname">Nom :</label>
					<input type="text" name="Lastname" id="Lastname" class="text ui-widget-content ui-corner-all" /><br />
					<label for="Firstname">Prénom :</label>
					<input type="text" name="Firstname" id="Firstname" class="text ui-widget-content ui-corner-all" /><br />
					<label for="Login">Login :</label>
					<input type="text" name="Login" id="Login" class="text ui-widget-content ui-corner-all" />
				</fieldset><br/>
			</form>
			<p class="validateTips"></p>
		</div>
		<script>
		{literal}
			$(function(){ 
				
				var lastname = $( "#Lastname" ),
					firstname = $( "#Firstname" ),
					login = $( "#Login" ),
					allFields = $( [] ).add( lastname ).add( firstname ).add( login ),
					tips = $( "#client_form .validateTips" ) ;
				
				function updateTips( t ) {
					tips
						.text( t )
						.addClass( "ui-state-highlight" );
					setTimeout(function() {
						tips.removeClass( "ui-state-highlight", 1500 );
					}, 500 );
				}
		
				function checkRegexp( o, regexp, n ) {
					if ( !( regexp.test( o.val() ) ) ) {
						o.addClass( "ui-state-error" );
						updateTips( n );
						return false;
					} else {
						return true;
					}
				}
				
				$('#new_client')
					.button()
					.click(function(){
						$( "#client_form" ).dialog ( "open" ) ;
					});
				
				$( "#client_form" ).dialog({
					autoOpen: false,
					height: 500,
					width: 550,
					modal: true,
					buttons: {
						"Envoyer": function() {
							var bValid = true;
							allFields.removeClass( "ui-state-error" );
							
							bValid = bValid && checkRegexp( lastname, /^[A-Za-z -]{2,255}$/i, "Le nom est une chaine de 2 à 255 caractères alphabétiques." );
							bValid = bValid && checkRegexp( firstname, /^[A-Za-z -]{2,255}$/i, "Le prénom est une chaine de 2 à 255 caractères alphabétiques." );
							bValid = bValid && checkRegexp( login, /^[0-9]{10}$/i, "Le login est une chaine de 10 chiffres." );
		
							if ( bValid ) {
								// Si les champs sont valides, faire une requête Ajax pour tenter de connecter l'utilisateur
								
								allFields.removeClass( "ui-state-error" );
								tips.text( "" );
								
								$.post( "{/literal}{url_to controller="admin" action="user"}{literal}",
									{
										add_user_form: 0,
										lastname: lastname.val(),
										firstname: firstname.val(),
										login: login.val()
									},
										function(data){
											updateTips( data[1] ) ;
											
											if ( data[0] == 1 )
												setTimeout( function() {
														$( location ).attr( "href", "" );
													},
													1000 );
										},
										"json");
								
							}
							
						},
						"Reset": function() {
							allFields.val( "" ).removeClass( "ui-state-error" );
							tips.text( "" );
						},
						"Annuler": function() {
							$( this ).dialog( "close" );
						}
					},
					close: function() {
						allFields.val( "" ).removeClass( "ui-state-error" );
						tips.text( "" );
					},
					open: function() {
						
					}
				});
				
			  	$("#users_list_tbl").jqGrid({
				    datatype: 'jsonstring',
				    datastr: "{/literal}{$users}{literal}",
				    colNames:['ID','Nom/Prénom', 'Login', 'Mot de passe'],
				    colModel :[ 
				    	{name:'id', index:'id', width:75, align:'center'}, 
				    	{name:'name', index:'name', width:200},
				    	{name:'login', index:'login', width:100, align:'center'},
				    	{name:'pass', index:'pass', width:100, align:'center'} 
			    	],
				    sortname: 'id',
				    sortorder: 'asc',
				    viewrecords: true,
				    gridview: true,
				    caption: 'Liste des utilisateurs',
				    hidegrid: false,
				    height: 220,
				    onSelectRow: function(id){ 
						$( location ).attr( "href", "{/literal}{url_to controller="admin" action="user"}{literal}/" + id );
					}
			  	});
			}); 
		{/literal}
		</script><br/>
		<h1>Administration des types</h1><br/>
		<div id="types_list">
			<table id="types_list_tbl"></table><br/>
			<p class="center"><button id="new_type">Ajouter un type de compte</button></p>
		</div>
		<div id="type_form" title="Ajouter un type de compte">
			<form>
				<fieldset>
					<label for="Entitled">Intitulé :</label>
					<input type="text" name="Entitled" id="Entitled" class="text ui-widget-content ui-corner-all" /><br />
					<label for="Ceiling">Plafond :</label>
					<input type="text" name="Ceiling" id="Ceiling" class="text ui-widget-content ui-corner-all" /><br />
					Laissez vide pour qu'il n'y ai aucun plafond.<br/>
					<label for="Withdraw">Retirer :</label>
					<select name="Withdraw" id="Withdraw">
						<option value="1">Oui</option>
						<option value="0">Non</option>
					</select><br/>
					<label for="Overdraft">Découvert :</label>
					<input type="text" name="Overdraft" id="Overdraft" class="text ui-widget-content ui-corner-all" /><br />
					Laissez vide pour qu'il n'y ai aucune limite de découvert.
				</fieldset><br/>
			</form>
			<p class="validateTips"></p>
		</div>
		<script>
		{literal}
			$(function(){
				
				var entitled = $( "#Entitled" ),
					ceiling = $( "#Ceiling" ),
					withdraw = $( "#Withdraw" ),
					overdraft = $( "#Overdraft" ),
					allFields = $( [] ).add( entitled ).add( ceiling ).add( withdraw ).add( overdraft ),
					tips = $( "#type_form .validateTips" ) ;
				
				function updateTips( t ) {
					tips
						.text( t )
						.addClass( "ui-state-highlight" );
					setTimeout(function() {
						tips.removeClass( "ui-state-highlight", 1500 );
					}, 500 );
				}
		
				function checkRegexp( o, regexp, n ) {
					if ( !( regexp.test( o.val() ) ) ) {
						o.addClass( "ui-state-error" );
						updateTips( n );
						return false;
					} else {
						return true;
					}
				}
				
				$('#new_type')
					.button()
					.click(function(){
						$( "#type_form" ).dialog ( "open" ) ;
					});
				
				$( "#type_form" ).dialog({
					autoOpen: false,
					height: 500,
					width: 550,
					modal: true,
					buttons: {
						"Envoyer": function() {
							var bValid = true;
							allFields.removeClass( "ui-state-error" );
							
							bValid = bValid && checkRegexp( entitled, /^[A-Za-z -]{2,255}$/i, "L'intitulé est une chaine de 2 à 255 caractères alphabétiques." );
							bValid = bValid && checkRegexp( ceiling, /^([0-9]+(\.[0-9]+){0,1}){0,1}$/i, "Le plafond est une chaine numérique." );
							bValid = bValid && checkRegexp( withdraw, /^[01]$/i, "" );
							bValid = bValid && checkRegexp( overdraft, /^([0-9]{0,11}){0,1}$/i, "Le découvert autorisé est une chaine numérique entière." );
							
							if ( bValid ) {
								// Si les champs sont valides, faire une requête Ajax pour tenter de connecter l'utilisateur
								
								allFields.removeClass( "ui-state-error" );
								tips.text( "" );
								
								$.post( "{/literal}{url_to controller="admin" action="type"}{literal}",
									{
										add_type_form: 0,
										entitled: entitled.val(),
										ceiling: ceiling.val(),
										withdraw: withdraw.val(),
										overdraft: overdraft.val()
									},
										function(data){
											updateTips( data[1] ) ;
											
											if ( data[0] == 1 )
												setTimeout( function() {
														$( location ).attr( "href", "" );
													},
													1000 );
										},
										"json");
								
							}
							
						},
						"Reset": function() {
							allFields.val( "" ).removeClass( "ui-state-error" );
							tips.text( "" );
						},
						"Annuler": function() {
							$( this ).dialog( "close" );
						}
					},
					close: function() {
						allFields.val( "" ).removeClass( "ui-state-error" );
						tips.text( "" );
					},
					open: function() {
						
					}
				});
				
			  	$("#types_list_tbl").jqGrid({
				    datatype: 'jsonstring',
				    datastr: "{/literal}{$types}{literal}",
				    colNames:['ID','Intitulé', 'Plafond', 'Retirer', 'Découvert autorisé'],
				    colModel :[ 
				    	{name:'id', index:'id', width:75, align:'center'}, 
				    	{name:'name', index:'name', width:125},
				    	{name:'plafond', index:'plafond', width:100, align:'right'},
				    	{name:'retirer', index:'retirer', width:50, align:'center'},
				    	{name:'decouvert', index:'decouvert', width:125, align:'right'} 
			    	],
				    sortname: 'id',
				    sortorder: 'asc',
				    viewrecords: true,
				    gridview: true,
				    caption: 'Liste des types de comptes',
				    hidegrid: false,
				    height: 220,
				    onSelectRow: function(id){ 
						//$( location ).attr( "href", "{/literal}{url_to controller="admin" action="user"}{literal}/" + id );
					}
			  	});
			}); 
		{/literal}
		</script>